<template>
	<div class="h-14 flex flex-col gap-[1px] justify-center pl-3 pr-2">
		<div class="flex items-center">
			<base-image
				class="w-6 h-6"
				:src="homeIcon"
				type="server"
				default="sports/team-home.svg"></base-image>
			<div class="ml-3 flex-1 w-1 flex items-center">
				<div class="truncate">{{ homeTeamName }}</div>
				<match-cards
					class="ml-1 relative -top-[5px]"
					:red-cards="homeRedCards"
					:yellow-cards="homeYellowCards"
					:corners="homeCorners" />
			</div>
			<div class="w-7 h-5 rounded-sm flex justify-center items-center bg-bg-1">
				<base-number-flip :value="homeScore" />
			</div>
		</div>
		<div class="flex items-center">
			<base-image
				class="w-6 h-6"
				:src="awayIcon"
				type="server"
				default="sports/team-away.svg"></base-image>
			<div class="ml-3 flex-1 w-1 flex items-center">
				<div class="truncate">{{ awayTeamName }}</div>
				<match-cards
					class="ml-1 relative -top-[5px]"
					:red-cards="awayRedCards"
					:yellow-cards="awayYellowCards"
					:corners="awayCorners" />
			</div>
			<div class="w-7 h-5 rounded-sm flex justify-center items-center bg-bg-1">
				<base-number-flip :value="awayScore" />
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage, BaseNumberFlip } from '@/components/base'
import MatchCards from '../match-cards/index.vue'

defineProps({
	homeIcon: {
		type: String
	},
	awayIcon: {
		type: String
	},
	homeTeamName: {
		type: String,
		default: ''
	},
	awayTeamName: {
		type: String,
		default: ''
	},
	homeScore: {
		type: String
	},
	awayScore: {
		type: String
	},
	homeRedCards: {
		type: String
	},
	awayRedCards: {
		type: String
	},
	homeYellowCards: {
		type: String
	},
	awayYellowCards: {
		type: String
	},
	homeCorners: {
		type: String
	},
	awayCorners: {
		type: String
	}
})
</script>
